<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户登录页面</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <style>
    .login-container {
      width: 300px;
      margin: 100px auto;
      padding: 20px;
      border: 1px solid #e6e6e6;
      border-radius: 5px;
      background-color: #fff;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    .login-title {
      text-align: center;
      font-size: 20px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
<div class="login-container">
  <div class="login-title">用户登录</div>
  <form class="layui-form" lay-filter="loginForm">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="doLogin">登录</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
    <!-- 添加注册按钮 -->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <a href="/login/register" class="layui-btn layui-btn-normal">注册</a>
      </div>
    </div>
  </form>
</div>

<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
  layui.use(['form', 'layer', 'jquery'], function() {
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.$;

    form.on('submit(doLogin)', function(data) {
      // 阻止表单的默认提交行为
      return false;
    });

    // 为登录按钮添加点击事件
    $('.layui-btn[lay-filter="doLogin"]').on('click', function() {
      var username = $('input[name="username"]').val();
      var password = $('input[name="password"]').val();

      // 发送 AJAX 请求
      $.ajax({
        url: '/api/login', // 这里替换为实际的 API 地址
        type: 'POST',
        data: {
          username: username,
          password: password
        },
        dataType: 'json',
        success: function(response) {
          if (response.code === 0) {
            // 登录成功
            layer.msg(response.msg, {
              icon: 1,
              time: 1000
            }, function () {
              window.location.href = '/index/index';
            });
          } else {
            // // 登录失败，根据不同错误类型显示不同提示
            // var errorMessage = '';
            // switch (response.errorType) {
            //   case 'invalidUsername':
            //     errorMessage = '用户名不存在，请检查用户名';
            //     break;
            //   case 'invalidPassword':
            //     errorMessage = '密码错误，请重新输入';
            //     break;
            //   default:
            //     errorMessage = response.message || '登录验证失败，请重试';
            //     break;
            // }
            layer.msg(response.msg, {
              icon: 2,
              time: 2000 // 显示 2 秒
            });
          }
        }
      });
    });
  });
</script>
</body>
</html>